  <template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <div class="tabs-box mar-t--10">
        <el-tabs v-model="tabActiveStatus" @tab-click="doChangeTab">
          <el-tab-pane :label="labels[0]" name="0"> </el-tab-pane>
          <el-tab-pane :label="labels[-2]" name="-2"> </el-tab-pane>
          <el-tab-pane :label="labels[1]" name="1"> </el-tab-pane>
          <el-tab-pane :label="labels[20]" name="20"> </el-tab-pane>
          <el-tab-pane :label="labels[2]" name="2"> </el-tab-pane>
          <el-tab-pane :label="labels[3]" name="3"> </el-tab-pane>
          <el-tab-pane :label="labels[4]" name="4"> </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 手动订单 -->
      <hand-order-list v-on:refreshStat="refreshStat" v-if="tabActiveStatus == 0"></hand-order-list>
      <!-- 系统订单 -->
      <project-order-list v-on:refreshStat="refreshStat" v-else :orderStatus="tabActiveStatus"></project-order-list>
    
    </div>
  </div>
</template>

<script>
  import { statHandOrder } from '@/api/order/handOrder'
  import HandOrderList from './components/hand-order-list'
  import ProjectOrderList from './components/project-order-list'

  export default {
    components: {
      HandOrderList, ProjectOrderList
    },
    data() {
      return {
        // tab model
        tabActiveStatus: '0',
        labels: {
          '0': '待提交(0)',
          '-2': '已取消(0)',
          '1': '待发货(0)',
          '20': '部分发货(0)',
          '2': '已发货(0)',
          '3': '已收货(0)',
          '4': '已完成(0)'
        }
      }
    },
    // 初始化页面
    created() {
      this.init()
    },
    methods: {
      init() {
        // 默认查询条件
        const form = {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId()
        }
        statHandOrder(form).then(response => {
          if (response.isError) return
          this.labels[0] = '待提交(' + (response.data[0]) + ')'
          this.labels[-2] = '已取消(' + response.data[-2] + ')'
          this.labels[1] = '待发货(' + response.data[1] + ')'
          this.labels[20] = '部分发货(' + response.data[20] + ')'
          this.labels[2] = '已发货(' + (response.data[2]) + ')'
          this.labels[3] = '已收货(' + (response.data[3]) + ')'
          this.labels[4] = '已完成(' + (response.data[4]) + ')'
        })
      },
      // tab切换事件
      doChangeTab() {
        this.init()
      },
      // 重新统计事件
      refreshStat() {
        this.init()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>